<template>
   <div class="overflow-auto">
       <!-- 功能 -->
       <ChatFun id="ChatFun" class="flex"/>
       <!-- 聊天内容 -->
       <ChatContent id="ChatContent" />
       <!-- 聊天框 -->
       <ChatFrame id="ChatFrame" class="flex"/>
   </div>
</template>
<script>
import { mapState } from 'vuex'
import ChatContent from './ChatContent/ChatContent.vue'
import ChatFrame from './ChatFrame/ChatFrame.vue'
import ChatFun from './ChatFun/ChatFun.vue'
  export default 
  {
    components: { ChatContent, ChatFrame, ChatFun },
     name :'', 
     computed:{
       ...mapState('Chat',['ChatNow','Chatlist'])
     },
     mounted(){
  
     }
  }
</script>
<style scoped lang='less'>
//  功能
#ChatFun{
  width: 100%;
  height: 50px;
  justify-content: flex-end;
  padding: 0 10px;
  box-sizing: border-box;
} 
// 聊天内容
#ChatContent{
    width: 100%;
    height: calc(75% - 50px);
    overflow: auto;
    padding: 10px;
    box-sizing: border-box;
}
// 聊天框
#ChatFrame{
    width: 100%;
    height: 25%;
    background: var(--GeneralBackColor-half);
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    margin-left: 5px;
}
</style>